<template>
  <div class="search-form-container">
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-row :gutter="16">
        <el-col :xs="24" :sm="16" :md="12" :lg="8">
          <el-form-item label="时间：">
            <el-date-picker
              v-model="searchForm.searchDate"
              type="date"
              clearable
              placeholder="选择日期"
              class="search-input"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24" align="center">
          <el-form-item>
            <el-button class="reset-btn" @click="handleReset">
              重置
            </el-button>
            <el-button type="primary" class="search-btn" @click="handleSearch">
              查询
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="js">
import { defineProps } from 'vue'

const props = defineProps({
  searchForm: {
    type: Object,
    required: true,
    default: () => ({ searchDate: '' })
  },
  handleSearch: {
    type: Function,
    required: true
  },
  handleReset: {
    type: Function,
    required: true
  }
})
</script>

<style scoped lang="scss">
// 自定义变量
$primary-color: #1890ff;
$text-regular: #666666;
$border-color: #e8e8e8;
$transition-base: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

.search-form-container {
  margin-bottom: 16px;
  padding: 16px 24px;
  background-color: #ffffff;
  border-radius: 4px;
  animation: slideDown 0.3s ease-out;
  transition: $transition-base;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-form {
  width: 100%;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

.search-input {
  width: 100%;
  max-width: 360px;
  height: 40px;
  border-radius: 4px;
  transition: $transition-base;

  &:hover {
    border-color: $primary-color;
  }

  &.is-focus {
    border-color: $primary-color;
  }
}

.reset-btn {
  margin-right: 12px;
  transition: $transition-base;
}

.search-btn {
  transition: $transition-base;
}
</style>